import { Form } from 'ant-design-vue';

const { Item } = Form;

export default {
  name: 'Maker',
  props: {
    FieldOption: Object
  },
  data() {
    return {
      form: this.$form.createForm(this)
    };
  },
  methods: {
    initForm: function () {
      this.form = this.$form.createForm(this);
    },
    renderFiledsItem: function (h, columns) {
      const _this = this;
      const itemArr = [];
      columns.forEach(function (col, i) {
        itemArr.push(
          h(Item, {
            props: { ...col }
          }, _this.renderFields(h, col))
        );
      });
      return itemArr;
    },
    renderFields: function (h, col) {
      const _this = this;
      const decorator = [col.key, { ...col }];
      return [h('a-' + col.fieldType, {
        props: {
          ...col
        },
        class: {
          ...col.class
        },
        style: col.style,
        attrs: {
          id: col.key
        },
        domProps: {
          innerHTML: col.innerHTML
        },
        on: {
          click: () => {
            col.click && col.click();
          }
        },
        directives: [
          {
            name: 'decorator',
            value: decorator
          }
        ]
      })];
    }
  },
  render(h) {
    return h(Form, {
      props: {
        form: this.form,
        ...this.$props.FieldOption
      },
      on: {
        submit: (e) => {
          e.preventDefault();
          this.$emit('submit', this.form.getFieldsValue(), this.form);
        }
      }
    }, this.renderFiledsItem(h, this.$props.FieldOption.columns));
  }
};
